<template>
    <div class="content settle-sub-box">
        <!--        <el-main>-->
        <!--            <el-container class="white-block box full">-->
        <!--                <el-header :height="'auto'">-->
        <!--                    &lt;!&ndash; <el-button class="primary" @click="goBack" size="small">返回</el-button> &ndash;&gt;-->
        <!--                </el-header>-->
        <div class="main">
            <el-form :label-width="'120px'"
                     :label-position="'right'"
                     :rules="rules"
                     class="clearfix"
                     ref="formData"
                     :model="formData">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="formData.name" size="small"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="formData.phone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="职称" prop="title">
                    <el-select v-model="formData.title" class="select short" size="small">
                        <el-option
                            v-for="item in titleOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属科室" prop="dept">
                    <!--                    <el-input v-model="formData.dept"></el-input>-->
                    <el-select v-model="formData.dept" class="select short" size="small">
                        <el-option
                            v-for="item in deptList"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="诊金" prop="cure">
                    <el-input v-model="formData.cure" size="small"></el-input>
                </el-form-item>
                <el-form-item label="头像" prop="head" class="head">
                    <div class="upload">

                        <el-upload
                            :action="'/_api/doctorManage/upload'"
                            :accept="'image/*'"
                            :file-list="fileList"
                            v-loading="loading"
                            :on-change="onChange"
                            :on-success="onSuccess"
                            :on-progress="onProgress"
                            :show-file-list="false">
                            <!--                        <div class="avatarImg">-->
                            <!--                            <el-image v-if="formData.head" :src="'/_api' + formData.head"-->
                            <!--                                      ></el-image>-->
                            <!--                        </div>-->
                            <el-avatar :size="70" :src="'/_api' + formData.head" :fit="'contain'" @error="errorHandler"
                                       v-if="formData.head">
                                <img src="../../static/images/doctor.png">
                            </el-avatar>
                            <el-avatar :size="70" :src="'../../static/images/doctor.png'" :fit="'contain'"
                                       v-else>
                            </el-avatar>
                        </el-upload>
                        <div v-if="formData.head" class="actions">
                            <i class="el-icon-delete" @click="delAvatar"></i>
                        </div>
                        <!--                        <el-link :underline="false" type="primary" v-if="formData.head" class="ml20"-->
                        <!--                                 @click="delAvatar">-->
                        <!--                            删除-->
                        <!--                        </el-link>-->
                    </div>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="formData.status" class="select short" size="small">
                        <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="替诊医生" prop="doctorIns" v-if="formData.status=='4'">
                    <!-- <el-select v-model="formData.doctorIns" class="select short"
                               size="small">
                        <el-option
                            v-for="item in doctorInsOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select> -->
                    <el-cascader size="small"
                                 clearable
                                 v-model="formData.doctorIns"
                                 :options="doctorInsOptions"
                                 @change="handleChange"
                                 :props="{ expandTrigger: 'hover', label: 'name', value: 'id', children: 'doctor'}"></el-cascader>
                </el-form-item>
                <el-form-item label="" v-else></el-form-item>
                <el-form-item label="简介" prop="intro" class="full">
                    <el-input type="textarea" :rows="6" v-model="formData.intro" size="small"></el-input>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" @click="save(id)" v-if="id">保存</el-button>
                <el-button type="primary" @click="save()" v-else>保存</el-button>
                <el-button type="primary" @click="goBack">返回</el-button>
            </div>
        </div>
        <!--            </el-container>-->
        <!--        </el-main>-->
    </div>
</template>

<script>
    export default {
        data() {
            let phone = /^1\d{10}$/, cure = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
                checkPhone = (rule, value, callback) => {
                    if (phone.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请输入正确的手机号'))
                    }
                },
                checkCure = (rule, value, callback) => {
                    if (cure.test(value)) {
                        callback()
                    } else {
                        return callback(new Error('请规范输入诊金，最多精确到分'))
                    }
                }
            return {
                id: null,
                loading: false,
                fileList: [],
                titleOptions: [
                    {
                        label: '初级',
                        value: 0
                    },
                    {
                        label: '中级',
                        value: 1
                    },
                    {
                        label: '副高级',
                        value: 2
                    },
                    {
                        label: '正高级',
                        value: 3
                    }
                ],
                statusOptions: [
                    {
                        label: '接诊',
                        value: 1
                    },
                    {
                        label: '长期停诊',
                        value: 2
                    },
                    {
                        label: '不接诊',
                        value: 3
                    },
                    {
                        label: '临时停诊',
                        value: 4
                    }
                ],
                doctorInsOptions: [],
                formData: {
                    name: '',
                    phone: '',
                    title: '',
                    dept: '',
                    cure: '',
                    status: '',
                    head: '',
                    intro: '',
                    doctorIns: []
                },
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入手机号码', trigger: 'blur'},
                        {validator: checkPhone, trigger: 'blur'}
                    ],
                    title: [
                        {required: true, message: '请选择职称', trigger: 'change'}
                    ],
                    dept: [
                        {required: true, message: '请输入所属科室', trigger: 'blur'}
                    ],
                    cure: [
                        {required: true, message: '请输入诊金', trigger: 'blur'},
                        {validator: checkCure, trigger: 'blur'}
                    ],
                    // doctorIns: [
                    //     { required: true, message: '请选择替诊医生', trigger: 'blur' }
                    // ],
                    status: [
                        {required: true, message: '请选择状态', trigger: 'change'}
                    ]
                },
                deptList: [] // 科室列表
            }
        },
        mounted() {
            if (this.$route.query.id) this.id = this.$route.query.id
            if (this.id) this.getData()
            this.getDoctorData()
            this.getDeptList()
        },
        methods: {
            // 获取部门列表
            getDeptList() {
                this.$http.get('/expertsSchedule/departmentInfo').then(result => {
                    if (result.success) {
                        this.deptList = result.data
                    }
                })
            },
            getDoctorData() {
                this.$http.get('/doctorManage/selectConsultingRoom').then(result => {
                    if (result.success) {
                        this.doctorInsOptions = result.data
                    }
                })
            },
            getData() {
                this.$http.get('/doctorManage/doctorManageShowOnePage', {
                    id: this.id
                }).then(result => {
                    if (result.success) {
                        this.formData = {
                            name: result.data.name,
                            phone: result.data.phoneNumber,
                            title: result.data.professionalTitle,
                            dept: result.data.departmentId,
                            status: result.data.suspendService,
                            head: result.data.photoPath,
                            intro: result.data.introduction,
                            doctorIns: result.data.replaceDoctor ? ['', result.data.replaceDoctor] : [],
                            cure: !result.data.visitPrice && result.data.visitPrice !== 0 ? result.data.visitPrice : result.data.visitPrice.toFixed(2)
                        }
                    }
                    this.$refs.formData.resetFields()
                })
            },
            goBack() {
                // this.$router.push('/monitor/doctor-manage')
                history.back()
            },
            onChange(file, fileList) {
                this.fileList = fileList.slice(-1)
            },
            onProgress() {
                this.loading = true
            },
            onSuccess(response, file, fileList) {
                this.loading = false
                this.formData.head = response.data.url
            },
            handleChange() {
                console.log(this.formData.doctorIns)
            },
            save(id) {
                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        if (id) {
                            this.$http.post('/doctorManage/updateDoctorMess', {
                                id: this.id,
                                name: this.formData.name,
                                phoneNumber: this.formData.phone,
                                professionalTitle: this.formData.title,
                                departmentId: this.formData.dept,
                                suspendService: this.formData.status,
                                photoPath: this.formData.head,
                                visitPrice: this.formData.cure,
                                replaceDoctor: this.formData.doctorIns.length > 0 ? this.formData.doctorIns[1] : null,
                                introduction: this.formData.intro
                            }).then(result => {
                                if (result.success) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    })
                                    this.goBack()
                                }
                            })
                        } else {
                            this.$http.post('/doctorManage/insertDoctorMess', {
                                name: this.formData.name,
                                phoneNumber: this.formData.phone,
                                professionalTitle: this.formData.title,
                                departmentId: this.formData.dept,
                                suspendService: this.formData.status,
                                photoPath: this.formData.head,
                                visitPrice: this.formData.cure,
                                replaceDoctor: this.formData.doctorIns.length > 0 ? this.formData.doctorIns[1] : null,
                                introduction: this.formData.intro
                            }).then(result => {
                                if (result.success) {
                                    this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    })
                                    this.goBack()
                                }
                            })
                        }
                    } else {
                        return false
                    }

                })
            },
            delAvatar() {
                if (this.formData.head) {
                    this.$confirm('是否确认删除头像操作', '', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.formData.head = ''
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                    }).catch(() => {
                        // this.$message({
                        //     type: 'info',
                        //     message: '已取消删除'
                        // })
                    })
                }
            },
            errorHandler() {
                return true
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .content {
        background-color: #fff;
    }

    .btn {
        text-align: center;

        .el-button {
            width: 120px;
            height: 40px;
        }
    }

    .main {
        width: 1000px;
        margin: 0 auto;
        padding: 50px 0;
    }

    .el-form {
        /*width: ;*/

        /deep/ .el-form-item {
            float: left;
            margin-right: 100px;

            &:nth-child(2n) {
                margin-right: 0;
            }

            .el-input,
            .el-cascader,
            .el-select {
                width: 300px;
            }

            .el-textarea {
                width: 820px
            }

            .el-input__inner {
                /*border: none;*/
                /*border-bottom: .02rem solid rgb(226, 225, 225);*/
            }

            .el-form-item__label {
                padding-right: 20px;
            }

            .el-button {
                width: 1.4rem;
                height: .44rem;
                vertical-align: middle;
            }

            .upload {
                display: inline-block;
                width: 70px;
                height: 70px;
                background-color: #ccc;
                border-radius: 50%;
                overflow: hidden;
                position: relative;

                .el-upload {
                    width: 70px;
                    height: 70px;
                }

                &:hover {
                    .actions {
                        display: block;
                    }
                }

                .actions {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 70px;
                    height: 70px;
                    line-height: 70px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, .3);
                    display: none;

                    i {
                        font-size: 14px;
                        color: #fff;
                        cursor: pointer;
                        padding: 5px;
                    }
                }

                /*.avatarImg {*/
                /*    overflow: hidden;*/
                /*    display: inline-block;*/
                /*    width: .7rem;*/
                /*    height: .7rem;*/
                /*    border-radius: 50%;*/

                /*    .el-image {*/
                /*        width: 100%;*/
                /*        height: 100%;*/
                /*    }*/
                /*}*/
            }

            &.full {
                margin-right: 0;
            }
        }

        .head {
            margin-bottom: 0;
        }
    }
</style>
